<style scoped>
.div_head{
  padding-left: 20px;
  padding-right: 20px;
  height: 54px;
  padding-top: 32px;
  color: #ffffff;
  opacity: 0.8;
  /*border: 1px red solid;*/
}
.div_main{
  position: relative !important;
  background: transparent;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: scroll;
  height:calc(100% - 40px);
  /*border: 1px red solid;*/
}
.div_main::-webkit-scrollbar { width: 0; height: 0; }
.main_foot{
  overflow: hidden;
  height: 89px;
  padding-top: 7px;
  border-radius: 32px 32px 0px 0px ;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
  /*border: 1px red solid;*/
}
.main_foot .van-tabbar-item{
  margin-top: 10px;
  height: 36px;
}

.main_cell_gruop {
  background-color: transparent;
}
.main_cell_gruop .van-cell{
  height: 90px;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}

.main-popup{
  height: calc(100% - 75px);
  width: calc(100% - 0px);
  margin-top: 30px;
  margin-left: 0px;
  border-radius: 10px;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}
.main-card{
  height: calc(100% - 50px);
  width: calc(100% - 40px);
  margin-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}

.div_center_card{
  position: absolute;
  top: 70px;
  left: 0px;
  width: calc(100% - 0px);
  height: calc(100% - 75px);
  overflow-y: scroll;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}

.div_flow_grid{
  float: left;
  height: 90px;
  width: calc(33.3% - 13px);
  background-color: #ffffff;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
}
.div_flow_grid_image{
  margin-top: 14px;
  margin-bottom: 3px;
 }
.div_flow_grid_text{
  font-size: 14px;
  color: #505968;
 }

/*input::-webkit-input-placeholder {text-align: right;}*/
</style>
<template>
  <div>
    <div v-show="newShow || tzggShow || taskEditShow"
         style="position: absolute;left:10px;top:32px;font-size: 24px;color: #ffffff;z-index: 10000;" >
      <van-icon name="arrow-left" style="float: right;" @click="closeAll" />
    </div>
    <div class="div_head">
      <template v-if="activeTab=='news' || activeTab=='task' || activeTab=='flow'">
        <div v-show="newShow || tzggShow || taskEditShow" style="float: left;width: 33%;">
          <span>&nbsp;</span>
        </div>
        <div v-show="newShow || tzggShow || taskEditShow" style="float: left;width: 34%;font-size: 18px;text-align: center;">
          <span v-show="activeTab=='news'" >通知公告</span>
          <span v-show="activeTab=='task'" >待办</span>
          <span v-show="activeTab=='flow'" >流程中心</span>
        </div>
        <div v-show="!(newShow || tzggShow || taskEditShow)" style="float: left;width: 34%;font-size: 18px;text-align: left;">
          <span v-show="activeTab=='news'" >通知公告</span>
          <span v-show="activeTab=='task'" >待办</span>
          <span v-show="activeTab=='flow'" >流程中心</span>
        </div>
        <div v-show="!(newShow || tzggShow || taskEditShow)" style="float: left;width: 33%;">
          <span>&nbsp;</span>
        </div>
        <div style="float: left;width: 33%;">
          <div v-show="listTop<=listTopMin && (activeTab=='news') &&!newShow && !tzggShow && newList.length>listTopMin"
               style="float: right;margin-right: 5px;padding-top: 3px;" @click="listTop=100">
            <div style="float: right;padding-top: 2px;">
              <van-icon name="arrow" style="float: right;" />
            </div>
            <div style="float: right;font-size: 12px;margin-right: 5px;">查看全部</div>
          </div>
        </div>
      </template>

      <template v-if="activeTab!='news' && activeTab!='task' && activeTab!='flow'">
        <div v-if="false" style="float: left;width: 33%;">
          <span>&nbsp;</span>
        </div>
        <div v-if="false" style="float: left;width: 34%;font-size: 18px;text-align: center;">
          <span v-show="activeTab=='user_info'" >我的</span>
        </div>
        <div style="float: left;width: 34%;font-size: 18px;">
          <span v-show="activeTab=='user_info'" >我的</span>
        </div>
      </template>
    </div>
    <div class="div_main" :style="{'height':main_height,'width':main_width}">
      <div v-show="activeTab=='news' && !newShow" class="main_cell_gruop"
                      v-loading="newListLoading">
        <van-cell v-for="item in newList.slice(0, listTop)" @click="showNews(item)" >
          <template #title>
            <div style="margin-top: 14px;">
              <div style="float: left;width: 60px;">
                <van-image width="40" height="40"
                           src="/images/mob-icon-box-01.svg" />
                <van-image v-if="item.tt_type=='new'" width="16" height="16"
                           src="/images/mob-icon-new.svg"
                           style="position: absolute;left:28px;top:35px;"/>
                <van-image v-if="item.tt_type=='tzgg'" width="16" height="16"
                           src="/images/mob-icon-notice.svg"
                           style="position: absolute;left:28px;top:35px;"/>
              </div>
              <div style="float: left;width: calc(100% - 60px);">
                <div style="font-size: 14px;">
                  <span style="color: #505968;">{{ item.title }}</span>
                  <span style="color: #999999;float: right;margin-right: 5px;">{{ item.tt_name }}</span>
                </div>
                <div style="font-size: 12px;">
                  <span style="color: #999999;">{{ item.publish_time_str }}</span>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>

      <div v-show="activeTab=='task' && !taskEditShow" class="main_cell_gruop"
           v-loading="taskListLoading">
        <van-cell v-for="item in taskList" @click="showTaskEdit(item)" style="padding-right: 0px;">
          <template #title>
            <div style="margin-top: 14px;">
              <div style="float: left;width: 60px;">
                <van-image width="40" height="40"
                           src="/images/mob-icon-box-01.svg" />
                <van-image width="16" height="16"
                           src="/images/mob-icon-task.svg"
                           style="position: absolute;left:28px;top:35px;"/>
              </div>
              <div style="float: left;width: calc(100% - 60px);">
                <div style="font-size: 14px;">
                  <span style="color: #505968;">{{ item.n_title_str }}</span>
                </div>
                <div style="font-size: 12px;">
                  <span style="color: #999999;">{{ item.flow_title + ' - '+ item.sys_code_key }}</span>
                </div>
              </div>
            </div>
          </template>
        </van-cell>
      </div>

      <div v-show="activeTab=='flow'" style="width: 100%;">
        <div v-for="item in flowList" class="div_flow_grid" @click="showTaskEdit_create(item)">
          <div class="div_flow_grid_image">
            <van-image width="40" height="40" :src="flowIcon[item.code]!=null?flowIcon[item.code]:flowIcon['nothing']"/>
          </div>
          <div class="div_flow_grid_text">{{item.title}}</div>
        </div>
      </div>
<!--      <van-grid v-show="activeTab=='flow'" :column-num="3" style="margin-top: 10%;" :gutter="10">-->
<!--        <van-grid-item v-for="item in flowList"-->
<!--                       :key="item.code" :icon="item.icon" :text="item.title" :test-icon-color="item.icon_color"-->
<!--                       style="height: 90px;border-radius: 10px;"-->
<!--                       @click="showTaskEdit_create(item)" />-->
<!--      </van-grid>-->
      <div v-show="activeTab=='user_info'" class="main-card" style="font-size: 14px;color: #505968;">
        <div style="width: 100%;height: 42px;padding-top: 65px;font-size: 18px;padding-left: 12px;">
          {{userInfo.name}}
        </div>
        <div style="width: 100%;height: 42px;padding-left: 12px;">
          {{userInfo.org_name}}
        </div>
          <div style="width: 100%;height: 38px;padding-left: 12px;">
          {{userInfo.role_name}}
          </div>
        <van-button block plain type="danger" native-type="button" @click="logout"
                    style="height: 42px;font-size: 18px;color:#ffffff;background-color:#f46d6d;border-radius: 4px;border-color:#f46d6d;margin-top: 15px;">
          退出</van-button>
      </div>
    </div>

    <van-tabbar v-model="activeTab" @change="tabChanged" class="main_foot"
                v-show="!taskEditShow && !newShow && !tzggShow">
      <van-tabbar-item name="news">
        <div style="padding-top: 10px;">通知公告</div>
        <template #icon="props">
          <img :src="props.active ? '/images/mob-icon-tab-a-01.svg' : '/images/mob-icon-tab-a-02.svg' " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item v-if="taskList.length==0" name="task" icon="home-o">
        <div style="padding-top: 10px;">待办</div>
        <template #icon="props">
          <img :src="props.active ? '/images/mob-icon-tab-b-01.svg' : '/images/mob-icon-tab-b-02.svg' " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item v-if="taskList.length>0" name="task" icon="home-o" :badge="taskList.length">
        <div style="padding-top: 10px;">待办</div>
        <template #icon="props">
          <img :src="props.active ? '/images/mob-icon-tab-b-01.svg' : '/images/mob-icon-tab-b-02.svg' " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="flow" icon="orders-o">
        <div style="padding-top: 10px;">流程中心</div>
        <template #icon="props">
          <img :src="props.active ? '/images/mob-icon-tab-c-01.svg' : '/images/mob-icon-tab-c-02.svg' " />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="user_info" icon="friends-o">
        <div style="padding-top: 10px;">我的</div>
        <template #icon="props">
          <img :src="props.active ? '/images/mob-icon-tab-d-01.svg' : '/images/mob-icon-tab-d-02.svg' " />
        </template>
      </van-tabbar-item>
    </van-tabbar>

    <van-popup v-model="newShow" position="left" :overlay="false"
               @open="newsOpened" @close="newsClosed"
               class="main-popup">
      <elm-mob-new-page v-if="newShow" :data_id="newsData.id" page_type="news"></elm-mob-new-page>
    </van-popup>
    <van-popup v-model="tzggShow" position="left" :overlay="false"
               @open="newsOpened" @close="newsClosed"
               class="main-popup">
      <elm-mob-new-page v-if="tzggShow" :data_id="newsData.id" page_type="tzgg"></elm-mob-new-page>
    </van-popup>
    <div v-show="taskEditShow" class="div_center_card">
      <elm-mob-flow-secform v-if="taskEditShow && taskEditData.type=='flow_task' && taskEditData.url==node_url_flowsec_form"
                            :flow_code="taskEditData.flow_code" :data_id="taskEditData.id"
                            :nodeins_id="taskEditData.nodeins_id" :page_type="taskEditPageType"
                            :pb_flag="taskEditPbFlag" @push_back_show="pushBackShow"
                            @after_submit="taskSubmited"></elm-mob-flow-secform>
      <elm-mob-task-rwzp v-if="taskEditShow && taskEditData.type=='yw_task' && taskEditData.url==task_url_rwzp"
                         :task_id="taskEditData.id" @after_submit="taskSubmited"></elm-mob-task-rwzp>
    </div>
    <div v-show="activeTab=='user_info'"
         style="position: absolute;z-index: 100000;left: 40px;top:70px;border-radius: 34px;overflow: hidden;">

      <img v-if="userInfo.ei_id!=null" :src='"/api/system/login/io/Viewer/biz_hrm_ei_basic_avatar/"+userInfo.ei_id+"?token="+userInfo.token'
           style="width: 68px;height: 68px;" />
      <img v-if="userInfo.ei_id==null" :src="userInfo.img_url"
           style="width: 68px;height: 68px;" />
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,

      activeTab:'news',

      main_height:'500px',
      main_width:'500px',

      userInfo:{
        'name':'',
        'org_name':'',
        'role_name':'',
        'ei_id':null,
        'img_url':'/images/mob-default-use-face.svg',
        'token':'--',
      },

      listTopMin:5,
      listTop:5,

      newListLoading:true,
      newList:[],
      newsData:{},
      newShow:false,
      tzggShow:false,

      taskListLoading:true,
      taskList:[],
      taskEditShow:false,
      taskEditPageType:'',
      taskEditData: {},
      taskEditPbFlag:'no',

      flowList:[],
      flowIconList:['records-o','coupon-o','notes-o','idcard','other-pay','orders-o'],
      flowIconColorList:['#57BC83','#6493EF','#EDBA61','#9FDEE5','#C3ADFF','#7ED4DB','#88D0A8','#F69E9F'],

      node_url_flowsec_form:'/system/flow/one_road_flowsec_form_s',
      task_url_rwzp:'/business/pmis/rwzp_edit',

      flowIcon:{
        'ask_leave':'/images/mob-icon-flow-01.svg',
        'bms_payment':'/images/mob-icon-flow-02.svg',
        'bms_reim':'/images/mob-icon-flow-03.svg',
        'business_trip':'/images/mob-icon-flow-05.svg',
        'one_road_flow_0001':'/images/mob-icon-flow-06.svg',
        'use_car':'/images/mob-icon-flow-07.svg',
        'nothing':'/images/mob-icon-flow-04.svg',
      },

    }
  },
  mounted() {
    this.main_height = ((document.body.clientHeight) - 182)+'px';
    this.main_width = ((document.body.clientWidth) - 39)+'px';

    this.v_getUserInfo();
    this.v_getTask();
    this.tabChanged(this.activeTab);
  },
  methods: {

    tabChanged:function(index){
      this.listTop = this.listTopMin;
      this.closeAll('all');

      if(index === 'news') {
        this.v_getNews();
        this.addLog('通知公告');
      } else if(index === 'task'){
        this.v_getTask();
        this.addLog('待办');
      } else if(index === 'flow'){
        this.v_getFlow();
      } else if(index === 'user_info'){
        this.addLog('我的');
      } else{
        console.log('不支持的标签页index：'+index);
      }
    },
    
    //记录日志
    async addLog(msg){
      let oper_log = {
        oper_type: "1", //手机
        user_name: elm.info.user.name,
        nick_name: elm.info.user.name,
        menu_title: "/mob/system/main",
        oper_time: new Date().toLocaleString(),
        msg: msg,
      }
      await elm.post('/system/login/log/Upsert', oper_log);
    },

    pushBackShow:function (){
      this.taskEditPbFlag = 'yes';
    },
    closeAll:function(str){
      if(str=='all'){
        this.taskEditPbFlag = 'no';
        this.newShow = false;
        this.tzggShow = false;
        this.taskEditShow = false;
      }
      else if(this.taskEditPbFlag=='yes'){
        this.taskEditPbFlag = 'no';
      }
      else{
        this.newShow = false;
        this.tzggShow = false;
        this.taskEditShow = false;
      }
    },

    showNews:function(data){
      this.newsData = data;
      if(data.tt_type=='new'){this.newShow = true;}
      else if(data.tt_type=='tzgg'){this.tzggShow = true;}
    },
    newsOpened:function(){
      console.log(JSON.stringify(this.newsData));
    },
    newsClosed:function(){
      this.newsData = {};
    },
    async v_getNews(){
      this.newListLoading = true;

      //不再展示新闻，只展示通知公告
      let newList = []
      //let newList = await elm.post('/business/my/GetNewsData', {'pageNum':1,'pageSize':50});
      //newList = newList.pagedata;
      //for(let i=0;i<newList.length;i++){newList[i]['tt_type']='new';newList[i]['tt_name']='新闻动态';}

      let tzList = await elm.post('/business/my/GetNoticeData', {'pageNum':1,'pageSize':50});
      //tzList = tzList.pagedata;
      if(tzList!=null && tzList.length>0){
        for(let i=0;i<tzList.length;i++){ tzList[i]['tt_type']='tzgg';tzList[i]['tt_name']='通知公告';}
      }
      else{tzList = [];}

      let nnnList = [];
      let t_kk_num=0;
      for(let i=0;i<newList.length;i++){
        let nItem = newList[i];
        for(let kk=t_kk_num;kk<tzList.length;kk++){
          let tItem = tzList[kk];
          let needAdd = false;
          if(!this.em(tItem.create_time) && this.em(nItem.create_time)){needAdd = true;}
          if(!this.em(tItem.create_time) && !this.em(nItem.create_time) && (new Date(tItem.create_time)>new Date(nItem.create_time))){
            needAdd = true;
          }
          if(needAdd){
            nnnList.push(tItem);
            kk++;
            t_kk_num = kk;
          }
          else{kk = tzList.length+1;}
        }
        nnnList.push(nItem);
      }
      for(let kk=t_kk_num;kk<tzList.length;kk++){
        nnnList.push(tzList[kk]);
      }

      for(let i=0;i<nnnList.length;i++){
        let item = nnnList[i];
        item['publish_time_str'] = item.publish_time==null?'':item.publish_time.split('T')[0];
        if(!this.em(item.title) && item.title.length>=11){item.title = item.title.substring(0,10)+'…';}
      }
      this.newList = nnnList;

      this.newListLoading = false;
    },

    showTaskEdit:function(data){
      this.taskEditPageType = 'edit';
      this.taskEditData = data;
      this.taskEditShow = true;
    },
    showTaskEdit_create:function(item){
      this.taskEditPageType = 'create';
      let data = {
        'flow_code':item.code,
        'type':'flow_task',
        'url':this.node_url_flowsec_form,
      };
      this.taskEditData = data;
      this.taskEditShow = true;
      this.addLog('流程中心【'+item.title+'】');
    },
    taskSubmited:function(){
      this.taskEditShow = false;
      this.taskEditData = {};
      this.v_getTask();
    },
    async v_getTask(){
      this.taskListLoading = true;
      let taskList = [];

      let pData = {'pageNum':1,'pageSize':50};
      let taskData = await elm.post('/system/login/flow/GetUserTaskRunning', pData);
      taskList = taskData.pagedata;
      for(let i=0;i<taskList.length;i++){
        let item = taskList[i];
        item['n_title_str'] = item.title==null?'任务':item.title;
        item.n_title_str = item.n_title_str+'  '+item.create_time;
      }
      //console.log(JSON.stringify(taskList));

      this.taskList = taskList;
      this.taskListLoading = false;
    },
    async v_getFlow(){
      let flowList = await elm.post('/system/login/flow/GetAllFlowCodeWithSecFrom', {});
      let num_1 = 0;
      let num_2 = 0;
      for(let i=0;i<flowList.length;i++){
        let item = flowList[i];
        item['icon'] = this.flowIconList[num_1];
        item['icon_color'] = this.flowIconColorList[num_2];
        num_1++;
        num_2++;
        if(num_1>=this.flowIconList.length){num_1 = 0;}
        if(num_2>=this.flowIconColorList.length){num_2 = 0;}
      }

      this.flowList = flowList;
    },
    async v_getUserInfo(){
      this.userInfo.name = elm.info.user.name;
      this.userInfo.org_name = '单位：'+elm.info.org.name;
      let role_name = '';
      for(let i=0;i<elm.info.role.length;i++){
        if(i>0){role_name = role_name+'、';}
        role_name = role_name+elm.info.role[i].name;
      }
      this.userInfo.role_name = '岗位：'+role_name;
      this.userInfo.token = elm.info.token;

      let imgCheck = await elm.post('/business/my/GetUserImg',{});
      console.log(JSON.stringify(imgCheck));
      if(imgCheck!=null && !this.em(imgCheck.id)){
        this.userInfo.ei_id= imgCheck.id;
      }
    },
    async logout(){
      let res = await elm.post('/system/login/Logout');
      if(res.status=="success")
      {
        //记录日志
        let oper_log = {};
        oper_log.oper_type = "1"; //手机
        oper_log.nick_name = elm.info.user.name;
        oper_log.menu_title = "/system/login/Logout";
        oper_log.oper_time = new Date().toLocaleString();
        oper_log.msg = "退出";
        await elm.post('/system/login/log/Upsert', oper_log);
        elm.info.token =null;
        elm.info.system =null;
        elm.info.menu =null;
        elm.info.user =null;
        elm.info.org =null;
        elm.info.role =null;
        //this.v("你已退出登录")
        setTimeout(()=>{
          top.location.href = elm.settings.routefix+elm.settings.loginPath;
        }, 1000);
      }
    },
    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },



  }
}
</script>
